<template>
    <div>
        <back-header class="header">
            <div>
                <img :src="allLive.image_path|isSrc" alt="">
                <h3>{{allLive.name}}</h3>
                <div class="send">
                    <span>{{isShow}}/</span>
                    <span>{{allLive.order_lead_time}}分钟送达/</span>
                    <span>配送费￥{{allLive.float_delivery_fee}}</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <p>欢迎光临，用餐高峰期请提前下单，谢谢。</p>
            </div>
            <div class="two">
                <span class="new">新</span>
                <span>新用户下单立减17.0元(不与其它活动同享)</span>
                <span class="num">4个活动</span>
            </div>


        </back-header>
        <!--跳转商品评价-->
        <nav class="tab-bar">
            <ul>
                <router-link tag="li" :to="'/home/list/'+allLive.id">
                    <p @click="unClick" class="sp">商品</p>
                </router-link>
                <router-link tag="li" :to="'/home/list/'+allLive.id">
                    <p @click="showClick" class="pj">评价</p>
                </router-link>
            </ul>
        </nav>
        <section v-if="unShow">
            <!--左边-->
            <ul class="zuo">
                <!--<span>{{c.icon_url}}</span>-->
                <div v-for="(c,index) in combo" @click="zuobian(index)" class="zuobian">
                    <img :src="c.icon_url|isSrc" style="height:0.78rem;float:left;margin:0.2rem;" v-if="showi(c.icon_url)">
                    <li>{{c.name}}</li>
                </div>

            </ul>
            <!--右边-->
            <div class="you">
                <div v-for="c in combo" class="youbian">
                    <div class="nice">
                        <span class="nice-1">{{c.name}}</span>
                        <span class="nice-2">{{c.description}}</span>
                        <span class="nice-3">···</span>
                    </div>

                    <div v-for="f in c.foods" class="fot">
                        <div class="tu">
                            <img :src="f.image_path|isSrc" alt="">
                        </div>

                        <div class="tuxia">
                            <p style="color:black;font-size:1rem;font-weight: 600" class="ming">{{f.name.slice(0,11)}}</p>
                            <span style="font-size:0.68rem;">{{f.description.slice(0,25)}}...</span>
                            <div style="margin-left:3.8rem;font-size:0.7rem;">
                                <span>月售{{f.month_sales}}份&#x3000</span>
                                <span> 好评率{{f.satisfy_rate}}%</span>
                            </div>
                            <div class="jia" style="margin-left:3.8rem;">
                                <span style="color:#FF761B;font-size:1.2rem;">￥{{f.specfoods[0].price}}</span>
                                <div class="i">
                                    <i v-if="c.is_selected" class="fa fa-plus-circle" style="background-color:white;color:#3199E8;font-size:1.25rem;line-height:1.9rem;"></i>
                                    <div v-else style="width: 3.2rem;background-color: #3199E8; border-radius: 1rem;">选规格</div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!--下边结算导航条-->
            <div class="di">
                <div class="car">
                    <div class="car1">
                        <i class="fa fa-cart-plus" aria-hidden="true"></i>
                    </div>

                </div>

                <div class="money">
                    <p style="font-size:1.1rem;height:1.5rem;margin-top:0.2rem;">￥0</p>
                    <p style="font-size:0.65rem;">配送费￥9</p>
                </div>
                <div class="js">
                    <p>去结算</p>
                </div>

            </div>
        </section>
        <section v-else>
            <div class="ping" style="padding:0.94rem;height:4.5rem;">
                <div style="float:left;width:5.6rem;height:4rem;border-right:1px solid #ccc;padding-right:0.94rem;text-align:center;">
                    <p style="height:1.88rem;line-height:1.88rem;font-size:1.7rem;color:#FF6600;">4.6</p>
                    <p style="height:1.25rem;font-size:0.94rem;">综合评价</p>
                    <p style="height:0.94rem;font-size:0.63rem;">高于周边商家62.5%</p>
                </div>
                <div class="star" style="float:left;margin-left:2.5rem;">
                    <p>
                        <span class="s1">服务态度</span>
                        <span class="s2">★★★★★</span>
                        <span>4.6</span>
                    </p>
                    <p>
                        <span class="s1">菜品评价</span>
                        <span class="s2">★★★★★</span>
                        <span>4.6</span>
                    </p>
                    <p>
                        <span class="s1">送达时间</span>
                        <span>32分钟</span>
                    </p>
                </div>
            </div>
            <div class="br"></div>
            <!--按钮评价-->
            <div style="padding:1rem;">
                <div>
                    <button class="btn">全部（888）</button>
                    <button class="btn">满意（560）</button>
                    <button class="btn">不满意（10）</button>
                    <button class="btn">有图（198）</button>
                    <button class="btn">送货快（598）</button>
                </div>
                <div>
                    <div class="user">
                        <i class="fa fa-user-circle" aria-hidden="true"></i>
                        <div class="user-right">
                            <div>
                                <span>匿名用户</span>
                                <span style="float:right;">2017-06-15</span>
                            </div>
                            <p>★★★★★</p>
                            <p>黑木耳</p>
                        </div>

                    </div>
                </div>
            </div>


        </section>
    </div>
</template>

<script>
    import backHeader from '../components/BackHeader'
    import share from "./share.js"
    export default {
        //混入
        mixins: [share],
        data() {
            return {
                allLive: [],
                isShow: "",
                combo: [],
                food: [],
                unShow: true,
                ping: [],
                one: "",
                two: "",
                showimg: true,
            }
        },

        methods: {
            showClick() {
                this.unShow = false
                $(".sp").css("color", "#929292")
                $(".pj").css("color", "#319EEE")

            },
            unClick() {
                this.unShow = true
                $(".pj").css("color", "#929292")
                $(".sp").css("color", "#319EEE")
            },
            getLive() {
                console.log(this.$route.params.id)
                this.$http.get("/myelm/shopping/restaurant/" + this.$route.params.id)
                    .then(function (res) {
                        console.log(res.body)
                        this.allLive = res.body
                        //  console.log(res.body.favored)

                    })
            },
            show() {
                if (this.allLive.favored == true) {
                    return this.isShow = "蜂鸟专送"
                }
                else {
                    return this.isShow = "商家配送"
                }
            },
            showi(e) {
                console.log(e)
                if (e == "") {
                    return false
                }
                else {
                    return true
                }
            },

            getCombo() {
                this.$http.get("/myelm/shopping/v2/menu?restaurant_id=" + this.$route.params.id)
                    .then(function (res) {
                        console.log(res.body)
                        this.combo = res.body

                    })
            },
            getPing() {
                this.$http.get("/myelm/ugc/v2/restaurants/" + this.$route.params.id + "/ratings?has_content=true&offset=0&limit=10")
                    .then(function (res) {
                        console.log(res.body)
                        this.ping = res.body
                    })
            },
            zuobian(e) {
                $(".zuobian").eq(e).css('background-color', "white").siblings().css('background-color', "#F1F1F1")
                $(".zuobian").eq(e).css('border-left', "0.2rem solid #3190E8").siblings().css('border-left', "none")
                $('.you').animate({
                    scrollTop: $(".youbian").eq(e).offset().top - $(".youbian").eq(0).offset().top
                });

            }
        },
        mounted() {
            $(".pj").css("color", "#929292")
        },
        created() {
            this.getLive()
            this.show()
            this.showi()
            this.getCombo()
            this.getPing()


            // var auchorTop = $(".zuobian").css("top");  
            //首先在监听器外部记录标签的初始位置  
            // auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); 
            $(".youbian").onscroll = function () {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                // $(".youbian").css("top", anchorTop + top + "px");  

            };
        }
    }

</script>

<style scoped>
    .header div {
        /*margin-top: 2.2rem;*/
        color: white;
        /*padding-top: 1rem;*/
    }

    .header img {
        float: left;
        width: 4.1rem;
        height: 4.1rem;
        border-radius: 5px;
        border: 1px solid white;
        margin-left: 0.6rem;
        margin-right: 0.6rem;
    }

    .header div h3 {
        margin: 0;
    }

    .header div .send {
        margin: 0;
        font-size: 0.8rem;
    }

    .header div .send i {
        font-size: 1.5rem;
        position: absolute;
        top: 3.8rem;
        right: 0.5rem;
    }

    .header div p {
        font-size: 0.8rem;
    }

    .header div h3 {
        font-size: 1.1rem;
    }

    .header .two {
        margin: 0;
        font-size: 0.8rem;
        margin-top: 0.3rem;
        margin-left: 0.6rem;
    }

    .header .two .new {
        background-color: #70BC46;
    }

    .header .two .num {
        float: right;
        margin-right: 0.5rem;
    }

    .tab-bar {
        /*position: fixed;*/
        top: 8rem;
        height: 44px;
        border-top: 1px solid #ccc;
        background-color: white;
        width: 100%;
    }

    .tab-bar ul li {
        float: left;
        width: 50%;
        line-height: 44px;
        text-align: center;
        font-size: 18px;
        color: #333;
        cursor: pointer;
        border-left: 1px solid #ccc;
        box-sizing: border-box;
    }

    .tab-bar ul li:first-child {
        border-left: none;
    }
    /*选中状态*/

    .tab-bar ul .router-link-active {
        color: #3190E8;
        /*text-decoration: underline;*/
    }

    .zuo {
        float: left;
        /*margin-top: 11rem;*/
        height: calc(100vh - 11rem);
        overflow-y: scroll;
    }

    .zuo div {
        width: 5.4rem;
        padding: 1rem 0.45rem;
        box-sizing: border-box;
        /*height: 3.2rem;*/
        background-color: #F1F1F1;
        font-size: 0.95rem;
        color: #666666;
        overflow: hidden;
    }

    .you {
        float: left;
        /*margin-top: 11rem;*/
        width: calc(100vw - 5.4rem);
        height: calc(100vh - 11rem);
        overflow-y: scroll;
    }

    .you .nice {
        height: 2rem;
        background-color: #F1F1F1;
        /*width:100px;*/
        display: inline-block;
        width: 18rem;
        color: #666666;
    }

    .you img {
        width: 3.25rem;
        height: 3.25rem;
    }

    .you .nice .nice-1 {
        font-size: 1rem;
        margin-right: 0.1rem;
        line-height: 2rem;
    }

    .you .nice .nice-2 {
        font-size: 0.75rem;
    }

    .you .nice .nice-3 {
        float: right;
        line-height: 2rem;
        margin-right: 0.1rem;
    }

    .you .fot {
        background-color: white;
        padding: 1rem 0.6rem;
        height: 5.8rem;
    }

    .you .fot .tuxia {
        height: 5.8rem;
        color: #666666;
    }

    .you .fot img {
        float: left;
        margin-right: 0.6rem;
    }

    .you .fot .jia .i {
        float: right;
        color: white;
        text-align: center;
    }
    /*.you .fot .ming{
         font-size: 1rem;
         font-weight: 600
     }*/

    .di {
        position: fixed;
        z-index: 100000;
        bottom: 0;
        width: 100%;
        height: 3rem;
        background-color: #464648;
    }

    .di .car {
        float: left;
        width: 4.8rem;
        height: 4.8rem;
    }

    .di .car .car1 {
        width: 2.5rem;
        height: 2.5rem;
        border: 0.3rem solid #4C4D4D;
        border-radius: 50%;
        /*text-align: center;*/
        position: absolute;
        bottom: 0.4rem;
        left: 0.9rem;
        background-color: #3F3F3F;
    }

    .di .car i {
        font-size: 1.8rem;
        margin-top: 0.3rem;
        margin-left: 0.3rem;
        color: #656568;
    }

    .di .money {
        float: left;
        color: white;
        font-weight: 500;
        height: 4.8rem;
    }

    .di .js {
        float: right;
        width: 6.6rem;
        height: 100%;
        background-color: #5B5B5E;
        text-align: center;
        line-height: 3rem;
        color: white;
        font-size: 0.9rem;
        font-weight: 500;
    }
    /*评价页面*/

    .ping {
        color: #666666;
    }

    .ping .star p {
        margin: 0.31rem 0;
    }

    .ping .s1 {
        line-height: 1rem;
        font-size: 0.95rem;
        margin-right: 0.62rem;
    }

    .ping .s2 {
        color: #FFAA0C;
        line-height: 1.25rem;
        font-size: 1rem;
        margin-right: 0.62rem;
    }

    .br {
        height: 0.63rem;
        width: 100%;
        background-color: #F4F4F4;
    }
    /*按钮*/

    .btn {
        color: #7B8693;
        line-height: 1rem;
        padding: 0.5rem;
        background-color: #EBF5FF;
        border: none;
        border-radius: 0.2rem;
        margin: 0.3rem;
    }

    .user i {
        float: left;
        font-size: 1.9rem;
        color: #DDDDDD;
    }
    .user .user-right{
        float: left;
        width: calc(100% - 1.9rem);
    }
</style>